<template>
  <div id="app">
    <el-form :model="form" ref="form" label-width="80px" class="my-activity">
      <el-form-item label="活动名称">
        <el-input v-model="form.activityName"></el-input>
      </el-form-item>
      <!-- 活动区域开始 -->
      <el-form-item label="活动区域">
        <el-select v-model="form.area">
          <el-option
            v-for="option in areaOptions"
            :key="option.id"
            :label="option.name"
            :value="option.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <!-- 活动区域结束 -->
      <!-- 活动时间 -->
      <el-form-item label="活动时间">
        <el-date-picker
          v-model="form.activeityDate"
          type="date"
          placeholder="选择日期时间"
        >
        </el-date-picker>
        -
        <el-time-select
          v-model="form.activeityTime"
          :picker-options="{
            start: '00:00',
            step: '00:10',
            end: '24:00',
          }"
          placeholder="选择时间"
        >
        </el-time-select>
      </el-form-item>
      <!-- 活动时间结束 -->
      <!-- 及时配送 -->
      <el-form-item label="及时配送">
        <el-switch v-model="form.is_in_time"> </el-switch>
      </el-form-item>
      <el-form-item label="活动性质">
        <el-checkbox-group v-model="form.activity_properties">
          <el-row type="flex" justify="center">
            <el-col :span="10">
              <el-checkbox label="美食/餐厅线上活动"></el-checkbox>
            </el-col>
            <el-col :span="10">
              <el-checkbox label="地推活动"></el-checkbox>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="10">
              <el-checkbox label="线下主题活动"></el-checkbox>
            </el-col>
            <el-col :span="10">
              <el-checkbox label="单纯品牌曝光"></el-checkbox>
            </el-col>
          </el-row>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="特殊资源">
        <el-radio-group v-model="form.sp_resource">
          <el-radio  label="线上的品牌赞助"></el-radio>
          <el-radio  label="线下的场地免费"></el-radio>
        </el-radio-group>
        
      </el-form-item>
      <el-form-item label="活动形式" >
          <el-input v-model="form.activity_form" type="textarea" :row="2"></el-input>
          
      </el-form-item> 
      <el-form-item>
        <el-button type="primary">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getAreaInfo } from "./api/myapi";
export default {
  name: "App",
  components: {},
  async created() {
    // console.log(this.$el);
    // console.log(this.$data);
    let areaOptions = await getAreaInfo();
    // console.log(areaOptions);
    this.areaOptions = areaOptions;
  },
  data: function () {
    return {
      form: {
        activityName: "", //活动名称
        area: "", //区域
        activityDate: "", //活动日期
        activityTime: "", //活动时间
        is_in_time: false, //及时配送
        activity_properties: [],//活动形式
        sp_resource:false,//特殊资源
        activity_form:"",//活动形式
      },
      areaOptions: [],
    };
  },
};
</script>

<style scoped>
.my-activity {
  width: 55vw;
}
</style>
